<!--
 * @Description: 工单列表
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:12:18
-->
<template>
  <div>

    <!-- 搜索按钮 -->
    <div class="search">

      <el-form :inline="true" :model="form" class="demo-form-inline">

        <el-form-item >
          <el-input v-model="form.device_name" placeholder="请输入设备名称"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search">搜索(搜不了)</el-button>
        </el-form-item>
        
      </el-form>

    </div>

    <!-- 表格 -->
    <div class = "table">
      <el-table :data="empData" style="width: 100% ;">

        <el-table-column type="index" :index="1" label="序号" width="80" align= "center"></el-table-column>

        <el-table-column prop="engineer_name" label="工程名称" width="240" align= "center"></el-table-column>

        <el-table-column prop="device_name" label="设备名称" width="150"></el-table-column>

        <el-table-column prop="bill_why" label="问题描述" align= "center">
        </el-table-column>

        <el-table-column prop="status" label="状态" width="150" align= "center">
          <template v-slot="scope">
            <div>
              
              <el-tag v-if="scope.row.status === '进行中'" type="warning">进行中</el-tag>
              <el-tag v-else-if="scope.row.status === '待接单'" type="danger">待接单</el-tag>
              <el-tag v-else type="success">已完成</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="type" label="工单类型" width="180" align= "center"></el-table-column>

        <el-table-column label="操作" width="180" align= "center">
          <template v-slot="scope">
            <div>

              <el-button type="text" @click="$event => toDetails(scope.row)">详情</el-button>
              <el-button type="text"  v-if="scope.row.status === '已完成'" @click="toDelete(scope.row.id)">删除</el-button>
              <el-button type="text"  v-if="scope.row.status === '进行中'|| scope.row.status === '待接单'" disabled>删除</el-button>

            </div>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <!-- 分页按钮 -->
    <div class="page" style="margin-top:15px; text-align:center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        hide-on-single-page
      ></el-pagination>
    </div>

  </div>
</template>

<script>

import { get,del } from "@/utils/request";

export default {
  data() {
    return {
      //表单对象
      form:{},
      //设备数据
      empData:[],
      params:{
        //默认展示页码数
        page:1,
        //默认展示条数
        pageSize:5
      },
      total:0,
    };
  },
  computed: {},
  methods: {

    //跳转到工单详情页面
    toDetails(row){
      //路由跳转 并传参
      this.$router.push({
        path:'/am/order/Details',
        query:row
      })
    },

    //去删除已完成工单
    toDelete(id){
      this.$confirm('Are you sure?', '提示', {
      confirmButtonText: 'yes',
      cancelButtonText: 'no',
      type: 'warning'
    }).then(async() => {
      //发送请求,请求后台接口
      let res = await del('/workorder/deleteById',{id});
      this.$message({
        type: 'success',
        message: '删除成功!'
      });
      //刷新页面为1
      this.params.page=1;
      //刷新页面 重新加载数据
      this.getEmpData();
    }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        }); 
    },


    //查询工单信息
    async getEmpData(){
      let temp ={...this.form,...this.params}
      for(let key in temp){
        if(!temp[key])
        {
          delete temp[key]
        }
      } 

      let res = await get('/workorder/pageQuery',temp)
      this.empData = res.data.list;
      this.total = res.data.total;
    },
    //数据条数发送变化的函数
    handleSizeChange(pageSize) {
    //console.log(pageSiZe,'条数');
    //当条数发生改变，重新请求工程数据
    //params.pageSize ==》 2
    this.params.pageSize = pageSize;
    //重新请求工程数据
    this.getEmpData();
    },
    //页码发送改变的函数
    handleCurrentChange(page) {
      //console.log(page,'页码');
      this.params.page = page;
      this.getEmpData();
    }
  },
  created() {},
  mounted() {
    this.getEmpData();
  },
};
</script>
